[is=xo-lazyload],
.xo-background-lazyload,
.xo-lazyload,
.xo-lazyloaded {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto
}

.xo-background-lazyload {
    height: 100%
}

[data-xo-lazyloaded] {
    position: relative;
    z-index: 1
}

.xo-lazyload-overlay {
    position: absolute;
    inset: 0;
    z-index: 1
}

.xo-lazyload-overlay:empty {
    backdrop-filter: blur(30px);
    will-change: backdrop-filter
}

xo-container {
    display: block;
    max-width: var(--xo-container-width, 1400px);
    margin: auto;
    padding-left: var(--xo-container-gap, 20px);
    padding-right: var(--xo-container-gap, 20px)
}

xo-container[xo-fluid]:not([xo-fluid=false]) {
    max-width: 100%
}

xo-grid {
    display: grid;
    align-items: var(--align, normal);
    column-gap: var(--xo-grid-col-gap, 30px);
    row-gap: var(--xo-grid-row-gap, 30px);
    --xs: initial;
    --sm: initial;
    --md: initial;
    --lg: initial;
    --xl: initial
}

xo-grid[style*=--col-width] {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--col-width, 0), 100%), 1fr))
}

xo-grid:not([style*="--col-width"]) {
    grid-template-columns: repeat(12, 1fr)
}

xo-grid:not([style*="--col-width"])[style*=--xs],
xo-grid:not([style*="--col-width"]) [style*=--sm],
xo-grid:not([style*="--col-width"]) [style*=--md],
xo-grid:not([style*="--col-width"]) [style*=--lg],
xo-grid:not([style*="--col-width"]) [style*=--xl],
xo-grid:not([style*="--col-width"]) [style*=--xxl] {
    grid-template-columns: repeat(var(--xs, var(--sm, var(--md, var(--lg, var(--xl, var(--xxl)))))), 1fr)
}

@media (min-width: 576px) {

    xo-grid:not([style*="--col-width"])[style*=--xs],
    xo-grid:not([style*="--col-width"]) [style*=--sm],
    xo-grid:not([style*="--col-width"]) [style*=--md],
    xo-grid:not([style*="--col-width"]) [style*=--lg],
    xo-grid:not([style*="--col-width"]) [style*=--xl],
    xo-grid:not([style*="--col-width"]) [style*=--xxl] {
        grid-template-columns: repeat(var(--sm, var(--xs, var(--md, var(--lg, var(--xl, var(--xxl)))))), 1fr)
    }
}

@media (min-width: 768px) {

    xo-grid:not([style*="--col-width"])[style*=--xs],
    xo-grid:not([style*="--col-width"]) [style*=--sm],
    xo-grid:not([style*="--col-width"]) [style*=--md],
    xo-grid:not([style*="--col-width"]) [style*=--lg],
    xo-grid:not([style*="--col-width"]) [style*=--xl],
    xo-grid:not([style*="--col-width"]) [style*=--xxl] {
        grid-template-columns: repeat(var(--md, var(--sm, var(--xs, var(--lg, var(--xl, var(--xxl)))))), 1fr)
    }
}

@media (min-width: 992px) {

    xo-grid:not([style*="--col-width"])[style*=--xs],
    xo-grid:not([style*="--col-width"]) [style*=--sm],
    xo-grid:not([style*="--col-width"]) [style*=--md],
    xo-grid:not([style*="--col-width"]) [style*=--lg],
    xo-grid:not([style*="--col-width"]) [style*=--xl],
    xo-grid:not([style*="--col-width"]) [style*=--xxl] {
        grid-template-columns: repeat(var(--lg, var(--md, var(--sm, var(--xs, var(--xl, var(--xxl)))))), 1fr)
    }
}

@media (min-width: 1200px) {

    xo-grid:not([style*="--col-width"])[style*=--xs],
    xo-grid:not([style*="--col-width"]) [style*=--sm],
    xo-grid:not([style*="--col-width"]) [style*=--md],
    xo-grid:not([style*="--col-width"]) [style*=--lg],
    xo-grid:not([style*="--col-width"]) [style*=--xl],
    xo-grid:not([style*="--col-width"]) [style*=--xxl] {
        grid-template-columns: repeat(var(--xl, var(--lg, var(--md, var(--sm, var(--xs, var(--xxl)))))), 1fr)
    }
}

@media (min-width: 1400px) {

    xo-grid:not([style*="--col-width"])[style*=--xs],
    xo-grid:not([style*="--col-width"]) [style*=--sm],
    xo-grid:not([style*="--col-width"]) [style*=--md],
    xo-grid:not([style*="--col-width"]) [style*=--lg],
    xo-grid:not([style*="--col-width"]) [style*=--xl],
    xo-grid:not([style*="--col-width"]) [style*=--xxl] {
        grid-template-columns: repeat(var(--xxl, var(--xl, var(--lg, var(--md, var(--sm, var(--xs)))))), 1fr)
    }
}

xo-grid:not([style*="--col-width"]):not([style*="--xs"], [style*="--sm"], [style*="--md"], [style*="--lg"], [style*="--xl"], [style*="--xxl"])>* {
    grid-column-end: span var(--xs, var(--sm, var(--md, var(--lg, var(--xl, var(--xxl))))))
}

@media (min-width: 576px) {
    xo-grid:not([style*="--col-width"]):not([style*="--xs"], [style*="--sm"], [style*="--md"], [style*="--lg"], [style*="--xl"], [style*="--xxl"])>* {
        grid-column-end: span var(--sm, var(--xs, var(--md, var(--lg, var(--xl, var(--xxl))))))
    }
}

@media (min-width: 768px) {
    xo-grid:not([style*="--col-width"]):not([style*="--xs"], [style*="--sm"], [style*="--md"], [style*="--lg"], [style*="--xl"], [style*="--xxl"])>* {
        grid-column-end: span var(--md, var(--sm, var(--xs, var(--lg, var(--xl, var(--xxl))))))
    }
}

@media (min-width: 992px) {
    xo-grid:not([style*="--col-width"]):not([style*="--xs"], [style*="--sm"], [style*="--md"], [style*="--lg"], [style*="--xl"], [style*="--xxl"])>* {
        grid-column-end: span var(--lg, var(--md, var(--sm, var(--xs, var(--xl, var(--xxl))))))
    }
}

@media (min-width: 1200px) {
    xo-grid:not([style*="--col-width"]):not([style*="--xs"], [style*="--sm"], [style*="--md"], [style*="--lg"], [style*="--xl"], [style*="--xxl"])>* {
        grid-column-end: span var(--xl, var(--lg, var(--md, var(--sm, var(--xs, var(--xxl))))))
    }
}

@media (min-width: 1400px) {
    xo-grid:not([style*="--col-width"]):not([style*="--xs"], [style*="--sm"], [style*="--md"], [style*="--lg"], [style*="--xl"], [style*="--xxl"])>* {
        grid-column-end: span var(--xxl, var(--xl, var(--lg, var(--md, var(--sm, var(--xs))))))
    }
}

xo-grid:not([style*="--col-width"])>* {
    order: var(--order-xs);
    grid-column-start: var(--start-xs, auto)
}

@media (min-width: 576px) {
    xo-grid:not([style*="--col-width"])>* {
        order: var(--order-sm, var(--order-xs));
        grid-column-start: var(--start-sm, var(--start-xs, auto))
    }
}

@media (min-width: 768px) {
    xo-grid:not([style*="--col-width"])>* {
        order: var(--order-md, var(--order-sm, var(--order-xs)));
        grid-column-start: var(--start-md, var(--start-sm, var(--start-xs, auto)))
    }
}

@media (min-width: 992px) {
    xo-grid:not([style*="--col-width"])>* {
        order: var(--order-lg, var(--order-md, var(--order-sm, var(--order-xs))));
        grid-column-start: var(--start-lg, var(--start-md, var(--start-sm, var(--start-xs, auto))))
    }
}

@media (min-width: 1200px) {
    xo-grid:not([style*="--col-width"])>* {
        order: var(--order-xl, var(--order-lg, var(--order-md, var(--order-sm, var(--order-xs)))));
        grid-column-start: var(--start-xl, var(--start-lg, var(--start-md, var(--start-sm, var(--start-xs, auto)))))
    }
}

@media (min-width: 1400px) {
    xo-grid:not([style*="--col-width"])>* {
        order: var(--order-xxl, var(--order-xl, var(--order-lg, var(--order-md, var(--order-sm, var(--order-xs))))));
        grid-column-start: var(--start-xxl, var(--start-xl, var(--start-lg, var(--start-md, var(--start-sm, var(--start-xs, auto))))))
    }
}

[style*=--start-xs] xo-grid {
    --start-xs: 0
}

[style*=--start-sm] xo-grid {
    --start-sm: 0
}

[style*=--start-md] xo-grid {
    --start-md: 0
}

[style*=--start-lg] xo-grid {
    --start-lg: 0
}

[style*=--start-xl] xo-grid {
    --start-xl: 0
}

[style*=--start-xxl] xo-grid {
    --start-xxl: 0
}

[style*=--order-xs] xo-grid {
    --order-xs: 1
}

[style*=--order-sm] xo-grid {
    --order-sm: 1
}

[style*=--order-md] xo-grid {
    --order-md: 1
}

[style*=--order-lg] xo-grid {
    --order-lg: 1
}

[style*=--order-xl] xo-grid {
    --order-xl: 1
}

[style*=--order-xxl] xo-grid {
    --order-xxl: 1
}

[xb-href] {
    cursor: pointer
}

xo-parallax-scroll[xo-keyframes*=groupImg] img {
    opacity: 1
}

xo-parallax-scroll[xo-keyframes*=groupImg] img+img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.xo-navigate-smooth {
    animation: xoNavigateSmooth both .3s ease
}

@keyframes xoNavigateSmooth {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

xo-marquee {
    --xo-duration: 10s;
    display: flex;
    flex-wrap: nowrap;
    transform: translate3d(var(--xo-marquee-scroll, 0px), 0, 0)
}

xo-marquee[xo-rtl]:not([xo-rtl=false]) {
    direction: rtl
}

xo-marquee[xo-pause-on-hover]:not([xo-pause-on-hover=false]):hover xo-marquee-item {
    animation-play-state: paused !important
}

xo-marquee[xo-ready] xo-marquee-item {
    animation: xo-marquee var(--xo-marquee-duration) linear infinite
}

@keyframes xo-marquee {
    0% {
        transform: translate3d(var(--xo-marquee-from), 0, 0)
    }

    to {
        transform: translate3d(var(--xo-marquee-to), 0, 0)
    }
}

xo-marquee-item {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    will-change: transform
}

xo-marquee-scroll-transform {
    display: block
}

xo-toggle {
    display: block;
    width: auto;
    height: auto;
    border: 0;
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: inherit;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    overflow: visible
}

xo-toggle::backdrop {
    display: none
}

xo-modal {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0 !important;
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: inherit
}

xo-modal::backdrop {
    display: none
}

xo-modal:focus-visible {
    outline: none !important;
    box-shadow: none !important
}

xo-modal img {
    vertical-align: middle
}

xo-modal xo-modal-trigger {
    display: inline-block
}

xo-modal[xo-current-disabled]:not([xo-current-disabled=false]) {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    visibility: visible;
    overflow: visible;
    z-index: auto
}

xo-modal[xo-current-disabled]:not([xo-current-disabled=false]) xo-modal-trigger {
    display: none
}

xo-modal[xo-scroll-disabled]:not([xo-current-disabled=false]) {
    overflow: visible
}

xo-modal xo-carousel-slide {
    pointer-events: none;
    visibility: hidden
}

xo-modal[xo-active]:not([xo-active=false]) xo-carousel-slide {
    pointer-events: auto;
    visibility: visible
}

xo-modal-trigger {
    display: inline-block
}

xo-modal-pan {
    display: block;
    width: fit-content;
    overflow: hidden;
    touch-action: pinch-zoom
}

body.xo-modal-open {
    overflow: hidden;
    padding-right: var(--scroll-bar-width)
}

xo-scroll-x {
    display: block;
    position: relative
}

xo-scroll-x-item {
    height: 100%;
    overflow: hidden
}

xo-scroll-x-item~xo-scroll-x-item {
    position: absolute;
    top: 0;
    right: 0;
    width: 0
}

xo-toast-portal {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    padding: 10px;
    max-width: none;
    max-height: none;
    border: 0 !important;
    margin: 0;
    background-color: transparent;
    color: inherit;
    inset: auto;
    pointer-events: none
}

xo-toast-portal * {
    pointer-events: auto
}

xo-toast-portal[xo-placement^=top-] {
    top: 0
}

xo-toast-portal[xo-placement^=bottom-] {
    bottom: 0
}

xo-toast-portal[xo-placement$=-left] {
    left: 0
}

xo-toast-portal[xo-placement$=-center] {
    left: 50%;
    transform: translate(-50%);
    align-items: center
}

xo-toast-portal[xo-placement$=-right] {
    right: 0;
    align-items: flex-end
}

xo-toast-portal xo-toast {
    display: inline-block;
    width: fit-content;
    max-width: calc(100vw - 20px)
}

xo-toast {
    position: relative;
    display: none
}

xo-toast-close-button {
    position: absolute;
    padding: 8px;
    cursor: pointer;
    color: #b9b9b9;
    display: flex;
    align-items: center
}

xo-toast-close-button[xo-placement^=top-] {
    top: 0
}

xo-toast-close-button[xo-placement^=bottom-] {
    bottom: 0
}

xo-toast-close-button[xo-placement$=-left] {
    left: 0
}

xo-toast-close-button[xo-placement^=center-] {
    top: 50%;
    transform: translateY(-50%)
}

xo-toast-close-button[xo-placement$=-right] {
    right: 0
}

xo-toast-close-button[xo-placement=top] {
    top: 0
}

xo-toast-close-button svg {
    fill: currentColor;
    width: 20px;
    height: 20px
}

xo-popover {
    position: fixed;
    z-index: 99;
    display: block;
    width: fit-content;
    visibility: hidden;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    background-color: transparent;
    overflow: visible;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto
}

xo-popover::backdrop {
    display: none
}

xo-popover[xo-current-disabled]:not([xo-current-disabled=false]) {
    position: static;
    width: auto;
    visibility: visible;
    z-index: auto
}

xo-popover xo-carousel-slide {
    pointer-events: none;
    visibility: hidden
}

xo-popover[xo-active]:not([xo-active=false]) xo-carousel-slide {
    pointer-events: auto;
    visibility: visible
}

xo-popover-trigger {
    display: inline-block
}

xo-builder-popover-content {
    display: block;
    position: absolute;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all var(--xo-popover-duration)
}

xo-builder-popover {
    display: inline-block;
    position: relative
}

xo-builder-popover[xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-open]:not([xo-open=false]) xo-builder-popover-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none !important
}

xo-builder-popover[xo-animate=zoom] xo-builder-popover-content {
    transform: scale(.5)
}

xo-builder-popover[xo-animate=fade-up] xo-builder-popover-content {
    transform: translate3d(0, 20%, 0)
}

xo-builder-popover[xo-animate=fade-down] xo-builder-popover-content {
    transform: translate3d(0, -20%, 0)
}

xo-builder-popover[xo-animate=fade-left] xo-builder-popover-content {
    transform: translate3d(-20%, 0, 0)
}

xo-builder-popover[xo-animate=fade-right] xo-builder-popover-content {
    transform: translate3d(20%, 0, 0)
}

xo-builder-popover[xo-animate=none] xo-builder-popover-content {
    transition: none !important
}

xo-builder-popover[xo-placement=top-left] xo-builder-popover-content {
    bottom: 100%;
    left: 0
}

xo-builder-popover[xo-placement=top-center] xo-builder-popover-content {
    bottom: 100%;
    left: 50%;
    transform: translate(-50%)
}

xo-builder-popover[xo-placement=top-center][xo-animate=zoom] xo-builder-popover-content {
    transform: translate(-50%) scale(.5)
}

xo-builder-popover[xo-placement=top-center][xo-animate=fade-up] xo-builder-popover-content {
    transform: translate(-50%) translate3d(0, 20%, 0)
}

xo-builder-popover[xo-placement=top-center][xo-animate=fade-down] xo-builder-popover-content {
    transform: translate(-50%) translate3d(0, -20%, 0)
}

xo-builder-popover[xo-placement=top-center][xo-animate=fade-left] xo-builder-popover-content {
    transform: translate(-50%) translate3d(-20%, 0, 0)
}

xo-builder-popover[xo-placement=top-center][xo-animate=fade-right] xo-builder-popover-content {
    transform: translate(-50%) translate3d(20%, 0, 0)
}

xo-builder-popover[xo-placement=top-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=top-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
    transform: translate(-50%) scale(1) !important
}

xo-builder-popover[xo-placement=top-right] xo-builder-popover-content {
    bottom: 100%;
    right: 0
}

xo-builder-popover[xo-placement=bottom-left] xo-builder-popover-content {
    top: 100%;
    left: 0
}

xo-builder-popover[xo-placement=bottom-center] xo-builder-popover-content {
    top: 100%;
    left: 50%;
    transform: translate(-50%)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=zoom] xo-builder-popover-content {
    transform: translate(-50%) scale(.5)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-up] xo-builder-popover-content {
    transform: translate(-50%) translate3d(0, 20%, 0)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-down] xo-builder-popover-content {
    transform: translate(-50%) translate3d(0, -20%, 0)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-left] xo-builder-popover-content {
    transform: translate(-50%) translate3d(-20%, 0, 0)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-right] xo-builder-popover-content {
    transform: translate(-50%) translate3d(20%, 0, 0)
}

xo-builder-popover[xo-placement=bottom-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
    transform: translate(-50%) scale(1) !important
}

xo-builder-popover[xo-placement=bottom-right] xo-builder-popover-content {
    top: 100%;
    right: 0
}

xo-builder-popover[xo-placement=left-top] xo-builder-popover-content {
    top: 0;
    right: 100%
}

xo-builder-popover[xo-placement=left-center] xo-builder-popover-content {
    top: 50%;
    right: 100%;
    transform: translateY(-50%)
}

xo-builder-popover[xo-placement=left-center][xo-animate=zoom] xo-builder-popover-content {
    transform: translateY(-50%) scale(.5)
}

xo-builder-popover[xo-placement=left-center][xo-animate=fade-up] xo-builder-popover-content {
    transform: translateY(-50%) translate3d(0, 20%, 0)
}

xo-builder-popover[xo-placement=left-center][xo-animate=fade-down] xo-builder-popover-content {
    transform: translateY(-50%) translate3d(0, -20%, 0)
}

xo-builder-popover[xo-placement=left-center][xo-animate=fade-left] xo-builder-popover-content {
    transform: translateY(-50%) translate3d(-20%, 0, 0)
}

xo-builder-popover[xo-placement=left-center][xo-animate=fade-right] xo-builder-popover-content {
    transform: translateY(-50%) translate3d(20%, 0, 0)
}

xo-builder-popover[xo-placement=left-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=left-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
    transform: translateY(-50%) scale(1) !important
}

xo-builder-popover[xo-placement=left-bottom] xo-builder-popover-content {
    bottom: 0;
    right: 100%
}

xo-builder-popover[xo-placement=right-top] xo-builder-popover-content {
    top: 0;
    left: 100%
}

xo-builder-popover[xo-placement=right-center] xo-builder-popover-content {
    top: 50%;
    left: 100%;
    transform: translateY(-50%)
}

xo-builder-popover[xo-placement=right-center][xo-animate=zoom] xo-builder-popover-content {
    transform: translateY(-50%) scale(.5)
}

xo-builder-popover[xo-placement=right-center][xo-animate=fade-up] xo-builder-popover-content {
    transform: translateY(-50%) translate3d(0, 20%, 0)
}

xo-builder-popover[xo-placement=right-center][xo-animate=fade-down] xo-builder-popover-content {
    transform: translateY(-50%) translate3d(0, -20%, 0)
}

xo-builder-popover[xo-placement=right-center][xo-animate=fade-left] xo-builder-popover-content {
    transform: translateY(-50%) translate3d(-20%, 0, 0)
}

xo-builder-popover[xo-placement=right-center][xo-animate=fade-right] xo-builder-popover-content {
    transform: translateY(-50%) translate3d(20%, 0, 0)
}

xo-builder-popover[xo-placement=right-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content,
xo-builder-popover[xo-placement=right-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
    transform: translateY(-50%) scale(1) !important
}

xo-builder-popover[xo-placement=right-bottom] xo-builder-popover-content {
    bottom: 0;
    left: 100%
}

xo-tooltip {
    display: block;
    width: fit-content
}

xo-tooltip-content {
    position: absolute;
    z-index: 9999;
    display: block;
    width: fit-content;
    pointer-events: none;
    background-color: #111;
    color: #fff;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 3px;
    visibility: hidden;
    transition-delay: .1s
}

xo-tooltip-content[xo-active]:not([xo-active=false]) {
    visibility: visible
}

xo-tooltip-content[xo-animate=fade] {
    opacity: 0
}

xo-tooltip-content[xo-animate=fade][xo-active]:not([xo-active=false]) {
    opacity: 1
}

xo-tooltip-content[xo-animate=fade-down] {
    opacity: 0;
    transform: translate3d(0, -20px, 0)
}

xo-tooltip-content[xo-animate=fade-down][xo-active]:not([xo-active=false]) {
    opacity: 1;
    transform: translateZ(0)
}

xo-tooltip-content[xo-animate=fade-up] {
    opacity: 0;
    transform: translate3d(0, 20px, 0)
}

xo-tooltip-content[xo-animate=fade-up][xo-active]:not([xo-active=false]) {
    opacity: 1;
    transform: translateZ(0)
}

xo-tooltip-content[xo-animate=fade-left] {
    opacity: 0;
    transform: translate3d(20px, 0, 0)
}

xo-tooltip-content[xo-animate=fade-left][xo-active]:not([xo-active=false]) {
    opacity: 1;
    transform: translateZ(0)
}

xo-tooltip-content[xo-animate=fade-right] {
    opacity: 0;
    transform: translate3d(-20px, 0, 0)
}

xo-tooltip-content[xo-animate=fade-right][xo-active]:not([xo-active=false]) {
    opacity: 1;
    transform: translateZ(0)
}

xo-tooltip-content[xo-animate=zoom] {
    opacity: 0;
    transform: scale(.4)
}

xo-tooltip-content[xo-animate=zoom][xo-active]:not([xo-active=false]) {
    opacity: 1;
    transform: scale(1)
}

xo-tooltip-content:after {
    content: "";
    border: solid transparent;
    border-width: 6px;
    border-top-color: #111;
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    transform: translate(-50%)
}

xo-tooltip-content[xo-placement=top-left]:after {
    left: 20px;
    transform: none
}

xo-tooltip-content[xo-placement=top-right]:after {
    left: auto;
    right: 20px;
    transform: none
}

xo-tooltip-content[xo-placement^=bottom-]:after {
    top: auto;
    bottom: calc(100% - 1px);
    transform: translate(-50%);
    border-color: transparent;
    border-bottom-color: #111
}

xo-tooltip-content[xo-placement=bottom-center]:after {
    left: 50%
}

xo-tooltip-content[xo-placement=bottom-left]:after {
    left: 20px;
    transform: none
}

xo-tooltip-content[xo-placement=bottom-right]:after {
    left: auto;
    right: 20px;
    transform: none
}

xo-tooltip-content[xo-placement^=left-]:after {
    left: calc(100% - 1px);
    top: 50%;
    transform: translateY(-50%);
    border-color: transparent;
    border-left-color: #111
}

xo-tooltip-content[xo-placement^=right-]:after {
    left: auto;
    right: calc(100% - 1px);
    top: 50%;
    transform: translateY(-50%);
    border-color: transparent;
    border-right-color: #111
}

xo-collapse {
    display: block;
    height: 0;
    overflow: hidden;
    will-change: height
}

xo-collapse-trigger {
    display: block
}

xo-tabs {
    position: relative;
    display: block
}

xo-tabs-trigger {
    display: block;
    cursor: pointer
}

xo-tabs-content {
    position: relative;
    display: flex;
    flex-direction: column
}

xo-tabs-pane {
    position: absolute;
    width: 100%;
    display: block;
    visibility: hidden
}

xo-tabs-pane[xo-active]:not([xo-active=false]) {
    position: static;
    visibility: visible
}

[data-xb-section-id] xo-tabs-pane {
    position: static;
    width: 100%;
    display: none;
    visibility: visible
}

[data-xb-section-id] xo-tabs-pane[xo-active]:not([xo-active=false]) {
    display: block
}

xo-tabs-active {
    display: block;
    position: absolute;
    will-change: transform, width
}

xo-parallax,
[xo-parallax] {
    position: relative;
    display: block
}

xo-parallax-scroll {
    display: block;
    width: fit-content;
    background-size: cover
}

xo-parallax-scroll:empty {
    width: auto
}

xo-parallax-hover {
    display: block;
    width: fit-content
}

xo-parallax-hover:empty {
    width: auto
}

xo-carousel,
xo-carousel-thumbnail {
    position: relative;
    display: block;
    user-select: none
}

xo-carousel[xo-vertical] xo-carousel-list,
xo-carousel-thumbnail[xo-vertical] xo-carousel-list {
    flex-direction: column;
    height: 100%;
    touch-action: pan-x
}

xo-carousel[xo-overflow=hidden],
xo-carousel-thumbnail[xo-overflow=hidden] {
    overflow: hidden
}

xo-carousel[xo-overflow=visible] xo-carousel-inner,
xo-carousel-thumbnail[xo-overflow=visible] xo-carousel-inner {
    overflow: visible
}

xo-carousel[xo-rtl]:not([xo-rtl=false]),
xo-carousel-thumbnail[xo-rtl]:not([xo-rtl=false]) {
    direction: rtl
}

xo-carousel-inner {
    position: relative;
    z-index: 9;
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-rows: repeat(1, minmax(0, 1fr));
    overflow: hidden
}

xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=none] :not(xo-carousel-thumbnail) xo-carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    visibility: hidden
}

xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=none] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]) {
    visibility: visible;
    z-index: 9
}

xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide {
    opacity: 0;
    transition: var(--xo-speed)
}

xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]) {
    opacity: 1
}

xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide,
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide {
    transition: var(--xo-speed)
}

xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]),
xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]) {
    opacity: 1
}

xo-carousel-thumbnail {
    display: block
}

xo-carousel-thumbnail xo-carousel-slide {
    cursor: pointer
}

xo-carousel-list {
    display: flex;
    flex-direction: row;
    touch-action: pan-y;
    will-change: transform;
    justify-content: flex-start
}

xo-carousel-slide {
    width: calc(100% / var(--xo-per-view) + var(--xo-gap) / var(--xo-per-view));
    padding-inline-end: var(--xo-gap);
    flex-shrink: 0
}

@keyframes xo-carousel-mask {
    0% {
        mask-position: 100% 0
    }

    to {
        mask-position: 0% 0
    }
}

[xo-type=nature] xo-carousel-slide[xo-visible]:not([xo-visible=false]) {
    mask-image: url(https://raw.githubusercontent.com/long-hp/storage/main/nature-sprite.png);
    mask-size: 2300% 100%;
    animation: xo-carousel-mask var(--xo-speed, .2s) steps(22) forwards
}

[xo-type=water] xo-carousel-slide[xo-visible]:not([xo-visible=false]) {
    mask-image: url(https://raw.githubusercontent.com/long-hp/storage/main/nature-sprite-2.png);
    mask-size: 7100% 100%;
    animation: xo-carousel-mask var(--xo-speed, .2s) steps(70) forwards
}

[xo-type=urban] xo-carousel-slide[xo-visible]:not([xo-visible=false]) {
    mask-image: url(https://raw.githubusercontent.com/long-hp/storage/main/urban-sprite.png);
    mask-size: 3000% 100%;
    animation: xo-carousel-mask var(--xo-speed, .2s) steps(29) forwards
}

xo-carousel-thumbnail[xo-vertical] xo-carousel-slide,
xo-carousel[xo-vertical] xo-carousel-slide {
    width: auto;
    height: calc(100% / var(--xo-per-view) + var(--xo-gap) / var(--xo-per-view));
    padding-block-end: var(--xo-gap);
    padding-inline-end: 0
}

xo-carousel-prev,
xo-carousel-next {
    display: inline-block;
    cursor: pointer;
    user-select: none
}

xo-carousel-prev[xo-hide],
xo-carousel-next[xo-hide] {
    display: none
}

xo-carousel-pagination {
    display: flex;
    align-items: center
}

xo-carousel-bullet {
    display: flex;
    cursor: pointer
}

xo-range {
    position: relative;
    display: block;
    height: calc(var(--size) * 1px)
}

xo-range input[type=range] {
    display: block;
    margin: 0;
    padding: 0;
    appearance: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    pointer-events: none
}

xo-range input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: calc(var(--size) * 1px);
    height: calc(var(--size) * 1px);
    opacity: 0;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 2;
    pointer-events: auto
}

xo-range input[type=range]::-moz-range-thumb {
    width: calc(var(--size) * 1px);
    height: calc(var(--size) * 1px);
    opacity: 0;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    z-index: 2;
    pointer-events: auto
}

xo-range-track {
    display: block;
    background: #ddd;
    height: 5px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    border-radius: calc(var(--size) * 1px)
}

xo-range-progress {
    position: absolute;
    top: 0;
    height: 100%;
    background: #4caf82;
    left: calc(var(--size) / 2 * 1px);
    will-change: transform, width
}

xo-range-thumb {
    display: block;
    width: 20px;
    height: 20px;
    background: #4caf82;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: transform
}

xo-sticky {
    display: block
}

xo-sticky[xo-placement=bottom] {
    height: 0
}

xo-sticky-space {
    display: block;
    transition: all .3s
}

xo-filters-clear {
    display: none;
    width: fit-content;
    cursor: pointer
}

xo-filters-clear[xo-visible]:not([xo-visible=false]) {
    display: block
}

xo-filters-refine {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

xo-filters-refine xo-filters-clear {
    background: #e8e8e8;
    padding: 3px 8px;
    margin-right: 5px;
    margin-bottom: 5px
}

xo-filters-mobile,
xo-filters-sort-by-selected,
xo-filters-field {
    display: block
}

xo-filters-fallback {
    display: none
}

xo-filters-fallback[xo-visible]:not([xo-visible=false]) {
    display: block
}

xo-filters-refine-clear-icon {
    display: none
}

xo-gallery {
    display: block
}

xo-gallery-item {
    display: block
}

xo-gallery-item xo-modal-trigger {
    display: block;
    width: 100%;
    height: 100%
}

xo-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

xo-gallery-portal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    visibility: hidden;
    gap: 20px
}

xo-gallery-portal[xo-active]:not([xo-active=false]) {
    visibility: visible
}

xo-gallery-portal[xo-active]:not([xo-active=false]) xo-image-zoom-inner {
    display: block
}

xo-gallery-portal::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent
}

xo-gallery-portal xo-modal {
    position: relative;
    top: auto;
    left: auto;
    width: 100vw;
    flex-shrink: 0;
    scroll-snap-align: start;
    box-shadow: 20px 0 0 0 var(--xo-backdrop-color)
}

xo-gallery-portal xo-modal-pan {
    touch-action: pan-x
}

xo-gallery-portal xo-modal-trigger {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 34px
}

xo-gallery-portal xo-image-zoom-inner {
    display: none
}

xo-gallery-portal video {
    height: 100vh;
    width: 100vw
}

@-moz-document url-prefix() {
    xo-gallery-portal {
        scrollbar-color: transparent;
        scrollbar-width: none
    }
}

xo-gallery-prev,
xo-gallery-next {
    position: fixed;
    top: 50%;
    z-index: 999;
    width: 50px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    cursor: pointer;
    color: #fff;
    font-size: 30px
}

xo-gallery-prev {
    left: 0
}

xo-gallery-next {
    right: 0
}

xo-gallery-next svg {
    transform: rotate(180deg)
}

xo-gallery-counter {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff
}

xo-cart-quantity-minus,
xo-cart-quantity-plus {
    display: inline-block;
    cursor: pointer;
    user-select: none
}

xo-product-pickup-availability-empty,
xo-product-liquid-static,
xo-product-data {
    display: none !important
}

xo-product-recommendations,
xo-product-recipient-form-error,
xo-product-recipient-form,
xo-product-quick-view,
xo-product-quick-view-trigger,
xo-cart-add-error,
xo-cart-scroll,
xo-cart-shipping-rates-field,
xo-cart-note,
xo-product,
xo-cart,
xo-cart-mini,
xo-product-variant,
xo-product-will-change {
    display: block
}

xo-cart-add-error {
    visibility: hidden;
    overflow: hidden;
    height: 0
}

xo-cart-shipping-rates-field[xo-disabled] {
    display: none
}

xo-cart-note-button {
    display: inline-block
}

xo-cart-add-fallback,
xo-cart-change-fallback {
    display: none
}

xo-cart-add-fallback[xo-visible]:not([xo-visible=false]),
xo-cart-change-fallback[xo-visible]:not([xo-visible=false]) {
    display: block
}

xo-cart-add[xo-loading] xo-cart-add-fallback {
    display: block
}

.xo-cart-add-error,
.xo-cart-change-error {
    background-color: #fa6e6e;
    color: #fff;
    font-size: 14px;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    width: 360px
}

.xo-cart-add-error xo-toast-close-button,
.xo-cart-change-error xo-toast-close-button {
    color: #fff
}

.xo-cart-add-error xo-toast-close-button svg,
.xo-cart-change-error xo-toast-close-button svg {
    fill: currentColor;
    width: 20px;
    height: 20px
}

xo-cart-fly {
    display: none;
    position: absolute;
    z-index: 9999
}

:where(xo-animate:not([xo-item-used])) [xo-type=none],
xo-animate[xo-type=none] xo-animate-item,
[xo-animate=scroll] [xo-type=none] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1
}

:where(xo-animate:not([xo-item-used])),
[xo-animate=scroll] {
    --xo-strength: 1
}

:where(xo-animate:not([xo-item-used])),
xo-animate-item,
[xo-animate=scroll] {
    display: block;
    opacity: .01;
    animation-duration: calc(var(--xo-duration) * 1ms);
    animation-timing-function: var(--xo-easing);
    animation-delay: calc(var(--xo-order) * var(--xo-constant) * 1ms);
    animation-fill-mode: both
}

:where(xo-animate:not([xo-item-used]))[xo-type=width-increment],
xo-animate-item[xo-type=width-increment],
[xo-animate=scroll][xo-type=width-increment] {
    opacity: 1;
    overflow: hidden;
    animation: none !important;
    transition: all calc(var(--xo-duration) * 1ms) var(--xo-easing) calc((var(--xo-order) * var(--xo-constant) + var(--xo-wrap-duration, 0)) * 1ms)
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false]),
xo-animate-item[xo-visible]:not([xo-visible=false]),
[xo-animate=scroll][xo-visible]:not([xo-visible=false]) {
    backface-visibility: hidden;
    opacity: 1
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade] {
    animation-name: xo-fade
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-up] {
    animation-name: xo-fade-up
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-down],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-down],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-down] {
    animation-name: xo-fade-down
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-left],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-left],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-left] {
    animation-name: xo-fade-left
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-right],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-right],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-right] {
    animation-name: xo-fade-right
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=zoom-in],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=zoom-in],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=zoom-in] {
    animation-name: xo-zoom-in
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=zoom-out],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=zoom-out],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=zoom-out] {
    animation-name: xo-zoom-out
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=rotate-left-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=rotate-left-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=rotate-left-up] {
    transform-origin: 0 50%;
    animation-name: xo-rotate-left-up
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=rotate-right-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=rotate-right-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=rotate-right-up] {
    transform-origin: 100% 50%;
    animation-name: xo-rotate-right-up
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-left],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-left],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-left] {
    transform-origin: 100% 50%;
    animation-name: xo-snake-left
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-right],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-right],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-right] {
    transform-origin: 0 50%;
    animation-name: xo-snake-right
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-up] {
    transform-origin: 50% 0;
    animation-name: xo-snake-up
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-down],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-down],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-down] {
    transform-origin: 50% 100%;
    animation-name: xo-snake-down
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type="3d-up"],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type="3d-up"],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type="3d-up"] {
    transform-origin: 50% 0;
    animation-name: xo-3d-up
}

:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=blur],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=blur],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=blur] {
    animation-name: xo-blur
}

@keyframes xo-fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes xo-fade-up {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(var(--xo-strength) * 30%), 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-fade-down {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-fade-left {
    0% {
        opacity: 0;
        transform: translate3d(calc(var(--xo-strength) * 30%), 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-fade-right {
    0% {
        opacity: 0;
        transform: translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-zoom-in {
    0% {
        opacity: 0;
        transform: scale(.6)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-zoom-out {
    0% {
        opacity: 0;
        transform: scale(calc(var(--xo-strength) * 1.3))
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-rotate-left-up {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(10deg)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-rotate-right-up {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(-10deg)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-snake-up {
    0% {
        opacity: 0;
        transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * 30%), 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-snake-down {
    0% {
        opacity: 0;
        transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-snake-left {
    0% {
        opacity: 0;
        transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * 30%), 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-snake-right {
    0% {
        opacity: 0;
        transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-3d-up {
    0% {
        opacity: 0;
        transform: perspective(100rem) rotateX(-60deg)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes xo-blur {
    0% {
        opacity: 0;
        filter: blur(10px)
    }

    to {
        opacity: 1;
        filter: blur(0)
    }
}

[xo-animate=scroll][xo-opacity] {
    opacity: .01
}

xo-animate[xo-disabled],
xo-mega-menu [xo-animate=scroll] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-toggle xo-animate-item,
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal xo-animate-item,
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-popover xo-animate-item,
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item,
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item,
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-tabs-pane xo-animate-item {
    animation: none !important
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-toggle xo-animate-item[xo-type=fade-up],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-modal xo-animate-item[xo-type=fade-up],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-popover xo-animate-item[xo-type=fade-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-up],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-tabs-pane xo-animate-item[xo-type=fade-up] {
    transform: translate3d(0, calc(var(--xo-strength) * 30%), 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-toggle xo-animate-item[xo-type=fade-down],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-modal xo-animate-item[xo-type=fade-down],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-popover xo-animate-item[xo-type=fade-down],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-down],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-down],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-tabs-pane xo-animate-item[xo-type=fade-down] {
    transform: translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-toggle xo-animate-item[xo-type=fade-left],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-modal xo-animate-item[xo-type=fade-left],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-popover xo-animate-item[xo-type=fade-left],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-left],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-left],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-tabs-pane xo-animate-item[xo-type=fade-left] {
    transform: translate3d(calc(var(--xo-strength) * 30%), 0, 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-toggle xo-animate-item[xo-type=fade-right],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-modal xo-animate-item[xo-type=fade-right],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-popover xo-animate-item[xo-type=fade-right],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-right],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-right],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-tabs-pane xo-animate-item[xo-type=fade-right] {
    transform: translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-toggle xo-animate-item[xo-type=zoom-in],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-modal xo-animate-item[xo-type=zoom-in],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-popover xo-animate-item[xo-type=zoom-in],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-in],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-in],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-tabs-pane xo-animate-item[xo-type=zoom-in] {
    transform: scale(.6)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-toggle xo-animate-item[xo-type=zoom-out],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-modal xo-animate-item[xo-type=zoom-out],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-popover xo-animate-item[xo-type=zoom-out],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-out],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-out],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-tabs-pane xo-animate-item[xo-type=zoom-out] {
    transform: scale(calc(var(--xo-strength) * 1.3))
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-toggle xo-animate-item[xo-type=rotate-left-up],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-modal xo-animate-item[xo-type=rotate-left-up],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-popover xo-animate-item[xo-type=rotate-left-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-left-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-left-up],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-tabs-pane xo-animate-item[xo-type=rotate-left-up] {
    transform-origin: 0 50%;
    transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(10deg)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-toggle xo-animate-item[xo-type=rotate-right-up],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-modal xo-animate-item[xo-type=rotate-right-up],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-popover xo-animate-item[xo-type=rotate-right-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-right-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-right-up],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-tabs-pane xo-animate-item[xo-type=rotate-right-up] {
    transform-origin: 100% 50%;
    transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(-10deg)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-toggle xo-animate-item[xo-type=snake-left],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-modal xo-animate-item[xo-type=snake-left],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-popover xo-animate-item[xo-type=snake-left],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-left],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-left],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-tabs-pane xo-animate-item[xo-type=snake-left] {
    transform-origin: 100% 50%;
    transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * 30%), 0, 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-toggle xo-animate-item[xo-type=snake-right],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-modal xo-animate-item[xo-type=snake-right],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-popover xo-animate-item[xo-type=snake-right],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-right],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-right],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-tabs-pane xo-animate-item[xo-type=snake-right] {
    transform-origin: 0 50%;
    transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-toggle xo-animate-item[xo-type=snake-up],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-modal xo-animate-item[xo-type=snake-up],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-popover xo-animate-item[xo-type=snake-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-up],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-tabs-pane xo-animate-item[xo-type=snake-up] {
    transform-origin: 50% 0;
    transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * 30%), 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-toggle xo-animate-item[xo-type=snake-down],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-modal xo-animate-item[xo-type=snake-down],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-popover xo-animate-item[xo-type=snake-down],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-down],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-down],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-tabs-pane xo-animate-item[xo-type=snake-down] {
    transform-origin: 50% 100%;
    transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-toggle xo-animate-item[xo-type="3d-up"],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-modal xo-animate-item[xo-type="3d-up"],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-popover xo-animate-item[xo-type="3d-up"],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type="3d-up"],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type="3d-up"],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-tabs-pane xo-animate-item[xo-type="3d-up"] {
    transform-origin: 50% 0;
    transform: perspective(100rem) rotateX(-60deg)
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-toggle xo-animate-item[xo-type=blur],
xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-modal xo-animate-item[xo-type=blur],
xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-popover xo-animate-item[xo-type=blur],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=blur],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=blur],
xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-tabs-pane xo-animate-item[xo-type=blur] {
    filter: blur(10px)
}

xo-toggle[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-toggle[xo-active]:not([xo-active=false]) xo-animate-item,
xo-modal[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal[xo-active]:not([xo-active=false]) xo-animate-item,
xo-popover[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-popover[xo-active]:not([xo-active=false]) xo-animate-item,
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item,
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item,
xo-tabs-pane[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-tabs-pane[xo-active]:not([xo-active=false]) xo-animate-item {
    opacity: 1;
    backface-visibility: hidden
}

xo-toggle[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-toggle[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]),
xo-modal[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-modal[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]),
xo-popover[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-popover[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item:not([xo-type=width-increment]),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item:not([xo-type=width-increment]),
xo-tabs-pane[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-tabs-pane[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]) {
    transform: none
}

@media (prefers-reduced-motion: reduce) {

    xo-animate,
    xo-animate-item,
    [xo-animate=scroll] {
        opacity: 1;
        transition: none !important;
        animation: none !important
    }
}

[xo-animate=svg-infinite]:not(.xo-animate-svg-none) [xo-next-stroke-dasharray],
[xo-animate=svg-infinite]:not(.xo-animate-svg-none) [xo-next-stroke-dashoffset] {
    animation: xo-svg-infinite calc(var(--xo-duration) * 2ms) ease infinite
}

@keyframes xo-svg-infinite {
    0% {
        opacity: 1;
        stroke-dasharray: var(--xo-stroke-dasharray);
        stroke-dashoffset: var(--xo-stroke-dashoffset)
    }

    50%,
    80% {
        opacity: 1;
        stroke-dasharray: var(--xo-next-stroke-dasharray);
        stroke-dashoffset: var(--xo-next-stroke-dashoffset)
    }

    90%,
    to {
        opacity: 0;
        stroke-dasharray: var(--xo-next-stroke-dasharray);
        stroke-dashoffset: var(--xo-next-stroke-dashoffset)
    }
}

:where(xo-animate:not([xo-item-used]))[xo-type^=xo-goo-],
[xo-animate=scroll][xo-type^=xo-goo-] {
    animation: none !important;
    transition: none !important
}

xo-image-zoom {
    position: relative;
    display: block;
    cursor: none
}

xo-image-zoom img {
    width: 100%
}

xo-image-zoom[xo-active]:not([xo-active=false])[xo-zoom-full]:not([xo-zoom-full=false])>img {
    visibility: hidden
}

xo-image-zoom[xo-active]:not([xo-active=false]) xo-image-zoom-item {
    display: block !important
}

xo-image-zoom[xo-active]:not([xo-active=false]) xo-image-zoom-thumb {
    opacity: 1
}

xo-image-zoom[xo-placement=center] {
    cursor: zoom-in
}

xo-image-zoom[xo-placement=right] xo-image-zoom-inner {
    left: calc(100% + 10px)
}

xo-image-zoom[xo-placement=left] xo-image-zoom-inner {
    left: auto;
    right: calc(100% + 10px)
}

xo-image-zoom[xo-zoom-full]:not([xo-zoom-full=false]) xo-image-zoom-inner {
    pointer-events: auto
}

xo-image-zoom[xo-zoom-full]:not([xo-zoom-full=false]) xo-image-zoom-item {
    position: fixed !important
}

xo-image-zoom-thumb {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(255, 255, 255, .5);
    background-color: #ffffff1a;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease
}

xo-image-zoom-inner {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none
}

xo-image-zoom-item {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 9;
    background-color: var(--color-light-freeze);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transform-origin: 0 0;
    display: none !important
}

xo-countdown {
    display: block
}

xo-video-cover {
    display: block;
    position: relative;
    overflow: hidden
}

xo-video-cover:after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1
}

xo-video-cover-item {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0
}

xo-video-cover-item iframe,
xo-video-cover-item video,
xo-video-cover-item embed,
xo-video-cover-item object {
    display: block;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

xo-video-cover-button {
    display: inline-block
}

xo-typing:after {
    content: attr(xo-cursor-char);
    display: inline-block;
    margin-left: 2px;
    animation: xo-typing 1.2s
}

@keyframes xo-typing {

    0%,
    to {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

xo-typing-inner {
    display: inline-flex;
    overflow: hidden
}

xo-typing-content {
    position: relative;
    display: inline-flex;
    flex-direction: column
}

xo-typing-content span:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%
}

[xo-slide]>xo-typing-inner>xo-typing-content {
    animation: xo-typing-slide backwards calc(var(--xo-duration) * 1ms) ease
}

@keyframes xo-typing-slide {
    0% {
        transform: translateZ(0);
        width: var(--xo-width-0)
    }

    to {
        transform: translate3d(0, -100%, 0);
        width: var(--xo-width-1)
    }
}

[xo-goo]>xo-typing-inner>xo-typing-content {
    width: var(--xo-width-1)
}

[xo-goo]>xo-typing-inner>xo-typing-content span:nth-child(1) {
    top: 10%;
    animation: xo-typing-goo-span-1 calc(var(--xo-duration) * 1ms) ease
}

@keyframes xo-typing-goo-span-1 {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

[xo-goo]>xo-typing-inner>xo-typing-content span:nth-child(2) {
    top: 0;
    opacity: 0;
    animation: xo-typing-goo-span-2 calc(var(--xo-duration) * 1ms) ease
}

@keyframes xo-typing-goo-span-2 {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

xo-typing[xo-effect=goo] {
    position: relative
}

xo-typing[xo-effect=goo] span+span {
    position: absolute
}

xo-image-comparison {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    touch-action: pan-y
}

xo-image-comparison-label {
    position: absolute;
    top: 0;
    z-index: 1;
    background-color: #000;
    color: #fff;
    padding: 5px 10px
}

xo-image-comparison-after {
    display: block
}

xo-image-comparison-after img {
    width: 100%;
    pointer-events: none
}

xo-image-comparison-after xo-image-comparison-label {
    right: 0
}

xo-image-comparison-before {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    overflow: hidden;
    width: calc(var(--xo-value, 50) * 1%)
}

xo-image-comparison-before img {
    display: block;
    height: 100% !important;
    width: calc(100 / var(--xo-value, 50) * 100%) !important;
    max-width: none !important;
    object-fit: cover !important;
    pointer-events: none
}

xo-image-comparison-before xo-image-comparison-label {
    left: 0
}

xo-image-comparison-handle {
    display: block;
    position: absolute;
    top: 0;
    left: calc(var(--xo-value, 50) * 1%);
    z-index: 9;
    transform: translate(-50%);
    width: 2px;
    height: 100%;
    background-color: #fff;
    cursor: ew-resize
}

xo-image-comparison-handle-icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    height: fit-content;
    border-radius: 50%;
    cursor: ew-resize
}

xo-masonry {
    display: block;
    position: relative
}

xo-masonry-item {
    display: block !important
}

xo-cursor-item {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: block;
    transition: transform .4s, opacity .4s;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0);
    pointer-events: none
}

xo-cursor-item[xo-active]:not([xo-active=false]) {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1)
}

[is=xo-cursor][xo-absolute] xo-cursor-item {
    position: absolute
}

xo-360-viewer {
    user-select: none
}

xo-360-viewer-content {
    cursor: grab
}

xo-360-viewer,
xo-360-viewer-content,
xo-360-viewer-next,
xo-360-viewer-prev,
xo-360-viewer-play,
xo-360-viewer-pause {
    display: block
}

xo-360-viewer-content {
    position: relative
}

xo-360-viewer-content img+img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    visibility: hidden
}

xo-scroll-carousel {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-rows: repeat(1, minmax(0, 1fr));
    user-select: none;
    touch-action: pan-y
}

xo-scroll-carousel[xo-rtl]:not([xo-rtl=false]) {
    direction: rtl
}

xo-scroll-carousel>* {
    display: flex;
    flex-wrap: nowrap
}

xo-scroll-carousel>*>* {
    flex-shrink: 0;
    padding-inline-end: var(--xo-gap, 30px)
}

xo-scroll-carousel-next,
xo-scroll-carousel-prev {
    display: block;
    cursor: pointer
}

xo-magnetic,
xo-magnetic-content {
    display: inline-block;
    will-change: transform
}

xo-line-chart {
    position: relative;
    display: block;
    width: 100%;
    height: 100%
}

xo-line-chart svg {
    position: absolute;
    top: 0;
    left: 0
}

xo-scroll-scene {
    position: relative;
    display: block
}

xo-scroll-scene-inner {
    position: sticky;
    top: 0;
    left: 0;
    display: block;
    width: 100vw;
    height: 100vh
}

xo-scroll-scene-item {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    visibility: hidden
}

xo-scroll-scene-item[xo-active]:not([xo-active=false]) {
    pointer-events: auto;
    visibility: visible
}

xo-collection-tabs,
xo-collection-tabs-trigger,
xo-collection-tabs-content {
    display: block
}

.xo-hidden {
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    pointer-events: none !important
}